<template>
  <div class="app-container">
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.25rem" style="display:flex;flex-wrap:wrap;">
          <el-form-item class="form-item" style="font-size: 0.75rem;height: 1.9rem;" label="订单号">
            <el-input v-model="form.order_id" placeholder="请填写订单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="网厅订单号">
            <el-input v-model="form.ehall_order_id" placeholder="请填写网厅订单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="form.plate_no" placeholder="请填写车牌号" clearable></el-input>
          </el-form-item>
          <el-form-item label="卡类型">
            <template slot-scope="scope">
              <el-select v-model="form.card_type" clearable>
                <el-option v-for="item in cardTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="订单状态">
            <template slot-scope="scope">
              <el-select v-model="form.order_status" clearable>
                <el-option v-for="item in orderStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="支付状态">
            <template slot-scope="scope">
              <el-select v-model="form.pay_status" clearable>
                <el-option v-for="item in payStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="退款状态">
            <template slot-scope="scope">
              <el-select v-model="form.refund_status" clearable>
                <el-option v-for="item in refundStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="用户号">
            <el-input v-model="form.user_id" placeholder="请输入用户号" clearable></el-input>
          </el-form-item>
          <el-form-item label="订单创建时间">
            <el-date-picker v-model="form.create_date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
          </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重 置</el-button>
        <el-button class="btn" @click="search" type="primary">查 询</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.25rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod" label="序号" width="50" fixed="left">
        </el-table-column>
        <el-table-column prop="order_id" label="订单号" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="user_id" label="用户号" min-width="100" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="ehall_order_id" label="网厅订单号" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="plate_no" label="车牌号" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="card_type" :formatter="formatCardType" label="卡类型" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="order_status" :formatter="formatOrderStatus" label="订单状态" min-width="80" show-overflow-tooltip fixed="left">
        </el-table-column>
        <el-table-column prop="audit_desc" label="审核描述" min-width="100" show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="pay_status" :formatter="formatPayStatus" label="支付状态" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="pay_date" label="支付时间" min-width="80" show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="refund_status" :formatter="formatRefundStatus" label="退款状态" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_date" label="创建时间" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="last_date" label="更新时间" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="订单详情" min-width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" style="text-align: center" @click="lookView(scope.row)" plain><span class=" iconfont hhtx-chakan"></span></el-button>
          </template>
        </el-table-column>
        <!--<el-table-column prop="address" label="发送通知" min-width="150" fixed="right">-->
          <!--<template slot-scope="scope" class="buttons">-->
            <!--<div class="buttons" >-->
              <!--<el-button type="primary" style="font-size: 0.75rem;text-align: center;padding: 0.38rem 0.45rem;height: 1.9rem" @click="sendNotice(scope.row,1)" >订单通知</el-button>-->
              <!--<el-button type="primary" style="font-size: 0.75rem;text-align: center; padding: 0.38rem 0.45rem;height: 1.9rem" @click="sendNotice(scope.row,2)" >支付通知</el-button>-->
            <!--</div>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div class="dialog" v-if="isShow">
      <div class="dialog-box">
        <el-tabs  v-model="orderDetailTabs">
          <el-tab-pane name="orderTab" label="订单详情" >
            <div class="content" style="overflow-y: auto;">
              <el-form ref="orderForm" :model="orderForm" :rules="orderRules" label-width="5rem" style="display:flex;flex-wrap:wrap;">
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="订单号">
                  <div style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.order_id}}</div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="网厅订单号">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.ehall_order_id}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="卡类型">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.card_type_name}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="渠道">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.plat_id_name}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="支付状态">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.pay_status_name}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="支付时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.pay_date}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="退款状态">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.refund_status_name}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="车牌号">
                  <div class="bfc">
                    <el-input :disabled='orderIsDisabled' v-model="itemDetail.plate_no" @blur="isVehicleNumber(itemDetail.plate_no)" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="order_status" label="订单状态">
                  <div>
                    <el-select v-model="orderForm.order_status" :disabled='orderIsDisabled' placeholder="请选择" clearable>
                      <el-option v-for="item in orderStatusList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id" :disabled="item.disabled">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="audit_desc" label="审核描述">
                  <div class="bfc">
                    <el-input v-model="orderForm.audit_desc" :disabled='orderIsDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="address" label="收货地址">
                  <div class="bfc">
                    <el-input v-model="orderForm.address" :disabled='orderIsDisabled'  placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="express_cron" label="快递公司">
                  <div class="bfc">
                    <el-input v-model="orderForm.express_cron" :disabled='orderIsDisabled'  placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="express_no" label="快递单号">
                  <div class="bfc">
                    <el-input v-model="orderForm.express_no" :disabled='orderIsDisabled'  placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" label="是否开票">
                  <div>
                    <el-select v-model="itemDetail.is_invoice" :disabled='orderIsDisabled' placeholder="请选择" clearable>
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="invoice_title" label="发票抬头">
                  <div class="bfc">
                    <el-input v-model="orderForm.invoice_title" :disabled='orderIsDisabled'  placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" label="创建时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.create_date}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" label="更新时间">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.last_date}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;font-size: 0.75rem;height: 1.9rem;" prop="remark" label="备注">
                  <div>
                    <el-input style="font-size: 0.75rem; width: 15.6rem;" type="textarea" :rows="3" :disabled='orderIsDisabled'  placeholder="请输入内容" v-model="orderForm.remark">
                    </el-input>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-top: 1.25rem">
              <el-button class="btn" @click="close" type="primary">关闭</el-button>
              <el-button class="btn" @click="saveInfo('orderForm')" type="primary" :disabled='orderSaveBtnDisabled'>保存</el-button>
              <el-button class="btn" @click="modified" type="primary" :disabled='orderModifyBtnDisabled'>更改</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="证件详情" name="idTab">
            <div class="content flex-row">
              <!-- 左侧 -->
              <div class="flex-column">
                <div class=" flex-row">
                  <el-button type="primary" @click="showIdCardFront" :plain="plainFlag" style="margin-right: 1.25rem">人像面</el-button>
                  <el-button type="primary" @click="showIdCardVice" :plain="!plainFlag" >国徽面</el-button>
                </div>
                <div style="width: 18rem;height: 13rem;margin-top: 1.9rem;border: 1px solid #c0ccda" v-if="imgInfo.idcard_front_img">
                  <!--<img-zoom :rotate="idcard_front_deg" key="aaa" id="idcard_front" :src="imgInfo.idcard_front_img" width="200" height="200" :bigsrc="imgInfo.idcard_front_img" :configs="configs" v-if="idCardFlag" :style="idcard_front_style"></img-zoom>-->
                  <!--<img-zoom :rotate="idcard_vice_deg" key="bbb" id="idcard_vice" :src="imgInfo.idcard_vice_img" width="200" height="200" :bigsrc="imgInfo.idcard_vice_img" :configs="configs" v-if="!idCardFlag" :style="idcard_vice_style"></img-zoom>-->
                  <v-img ref="child1" :imgUrl="imgInfo.idcard_front_img" key="aaa" v-if="idCardFlag"></v-img>
                  <v-img ref="child2" :imgUrl="imgInfo.idcard_vice_img" key="bbb" v-if="!idCardFlag"></v-img>
                  <!--<viewer :options="options" :images="idcardFrontImgArr" v-if="idCardFlag">
                    <img v-for="src in idcardFrontImgArr" :src="src" :key="src" style="width: 16.7rem;height: 16.7rem;">
                  </viewer>
                  <viewer :options="options" :images="idcardViceImgArr" v-if="idCardFlag === true ? false:true">
                    <img v-for="src in idcardViceImgArr" :src="src" :key="src" style="width: 16.7rem;height: 16.7rem;">
                  </viewer>-->
                  <!--<pic-zoom  :url="imgInfo.idcard_front_img" v-bind:scale="3" v-bind:show-edit="false" ></pic-zoom>-->
                </div>
                <div class="flex-row1" style="margin-top: 1.25rem">
                  <i class="iconfont hhtx-xuanzhuanyou" @click="rotateRight()" style="margin-right: 1.9rem" ></i>
                  <i class="iconfont hhtx-xuanzhuanzuo" @click="rotateLeft()"></i>
                </div>
                <!--<div style="width: 16.7rem;height: 16.7rem;margin-top: 1.9rem" >
                  <viewer :options="options" :images="arr">
                    <img v-for="src in arr" :src="src" :key="src" style="width: 16.7rem;height: 16.7rem;">
                  </viewer>
                  &lt;!&ndash;<pic-zoom :url="imgInfo.idcard_front_img" v-bind:scale="3" v-bind:show-edit="false" ></pic-zoom>&ndash;&gt;
                </div>-->

              </div>
              <!-- 右侧 -->
              <div class="flex-column">
                <el-form ref="idForm" :model="idForm" :rules="idRules" label-width="5em" >
                  <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" prop="name" label="姓名">
                    <el-input v-model="idForm.name" :disabled='idCardIsDisabled' ></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" prop="nation" label="民族">
                    <el-input v-model="idForm.nation" :disabled='idCardIsDisabled' ></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" label="身份证号">
                    <el-input v-model="idCardInfo.cert_no" @blur="isCardNo(idCardInfo.cert_no)" :disabled='idCardIsDisabled' ></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" prop="cert_org" label="发证机关">
                    <el-input v-model="idForm.cert_org"  :disabled='idCardIsDisabled' ></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" prop="address" label="地址">
                    <el-input v-model="idForm.address"  :disabled='idCardIsDisabled' ></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" style="width: 22rem;height: 1.9rem;" prop="validity" label="有效期">
                    <el-input v-model="idForm.validity" :disabled='idCardIsDisabled' ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div style="margin-top: 1.25rem">
              <el-button class="btn" @click="close" type="primary">关闭</el-button>
              <el-button class="btn" @click="saveInfo('idForm')" type="primary" :disabled='idSaveBtnDisabled'>保存</el-button>
              <el-button class="btn" @click="modified" type="primary" :disabled='idModifyBtnDisabled'>更改</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="车辆详情" name="vehicleTab">
            <div class="content flex-row">
              <!-- 左侧 -->
              <div class="flex-column">
                <div class=" flex-row">
                  <el-button type="primary" @click="showVehicleFront" :plain="vehicleFrontPlainFlag" style="margin-right: 1.25rem">正本</el-button>
                  <el-button type="primary" @click="showVehicleVice" :plain="vehicleVicePplainFlag" style="margin-right: 1.25rem">副本</el-button>
                  <el-button type="primary" @click="showCar" :plain="carPlainFlag" >车辆</el-button>
                </div>
                <div style="width: 18rem;height: 13rem;margin-top: 1.9rem;border: 1px solid #c0ccda" v-if="imgInfo.vehicle_front_img">
                  <v-img ref="child3" :imgUrl="imgInfo.vehicle_front_img" key="aaa" v-if="vehicleFrontFlag"></v-img>
                  <v-img ref="child4" :imgUrl="imgInfo.vehicle_vice_img" key="bbb" v-if="vehicleViceFlag"></v-img>
                  <v-img ref="child5" :imgUrl="imgInfo.car_img" key="ccc" v-if="carFlag"></v-img>
                  <!--<img-zoom ref="child" id="vehicle_front" :src="imgInfo.vehicle_front_img" width="200" height="200" :bigsrc="imgInfo.vehicle_front_img" :configs="configs" v-if="vehicleFrontFlag" :style="vehicle_front_style"></img-zoom>-->
                  <!--<img-zoom ref="child" id="vehicle_vice" :src="imgInfo.vehicle_vice_img" width="200" height="200" :bigsrc="imgInfo.vehicle_vice_img" :configs="configs" v-if="vehicleViceFlag" :style="vehicle_vice_style"></img-zoom>-->
                  <!--<img-zoom ref="child" id="car_img" :src="imgInfo.car_img" width="200" height="200" :bigsrc="imgInfo.car_img" :configs="configs" v-if="carFlag" :style="car_style"></img-zoom>-->
                  <!--<viewer :options="options" :images="vehicleFrontImgArr" v-if="vehicleFrontFlag">
                    <img v-for="src in vehicleFrontImgArr" :src="src" :key="src" style="width: 16.7rem;height: 16.7rem;">
                  </viewer>
                  <viewer :options="options" :images="vehicleViceImgArr" v-if="vehicleViceFlag">
                    <img v-for="src in vehicleViceImgArr" :src="src" :key="src" style="width: 16.7rem;height: 16.7rem;">
                  </viewer>
                  <viewer :options="options" :images="carImgArr" v-if="carFlag">
                    <img v-for="src in carImgArr" :src="src" :key="src" style="width: 16.7rem;height: 16.7rem;">
                  </viewer>-->
                  <!--<pic-zoom  :url="imgInfo.idcard_front_img" v-bind:scale="3" v-bind:show-edit="false" ></pic-zoom>-->
                </div>
                <div class="flex-row1" style="margin-top: 1.25rem">
                  <i class="iconfont hhtx-xuanzhuanyou" style="margin-right: 1.9rem" @click="rotateRight()"></i>
                  <i class="iconfont hhtx-xuanzhuanzuo" @click="rotateLeft()"></i>
                </div>
              </div>
              <!-- 右侧 -->
              <div style="overflow-y: auto">
                <el-form ref="vehicleForm" :model="vehicleForm" :rules="vehicleRules" label-width="5rem" >
                  <el-form-item class="form-item form-item-dialog-id" prop="plate_no" style="width: 22rem;height: 1.9rem;" label="车牌号">
                    <el-input v-model="vehicleForm.plate_no" :disabled='vehicleIsDisabled' @blur="isVehicleNumber(vehicleCert.plate_no)"></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="owner" style="width: 22rem;height: 1.9rem;" label="所有人">
                    <el-input v-model="vehicleForm.owner" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="address" style="width: 22rem;;height: 1.9rem;" label="住址">
                    <el-input v-model="vehicleForm.address" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="brand" style="width: 22rem;;height: 1.9rem;" label="车辆品牌">
                    <el-input v-model="vehicleForm.brand" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="engine_no" style="width: 22rem;height: 1.9rem;" label="发动机号">
                    <el-input v-model="vehicleForm.engine_no" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="file_no" style="width: 22rem;height: 1.9rem;" label="档案编号">
                    <el-input v-model="vehicleForm.file_no" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="height" style="width: 22rem;height: 1.9rem;" label="外廓高">
                    <el-input v-model="vehicleForm.height" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="issue_date" style="width: 22rem;height: 1.9rem;" label="发证日期">
                    <el-input v-model="vehicleForm.issue_date" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="length" style="width: 22rem;height: 1.9rem;" label="外廓长">
                    <el-input v-model="vehicleForm.length" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="load_mass" style="width: 22rem;height: 1.9rem;" label="核载质量">
                    <el-input v-model="vehicleForm.load_mass" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="load_num" style="width: 22rem;height: 1.9rem;" label="核载人数">
                    <el-input v-model="vehicleForm.load_num" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="main_mass" style="width: 22rem;height: 1.9rem;" label="整备质量">
                    <el-input v-model="vehicleForm.main_mass" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="model" style="width: 22rem;height: 1.9rem;" label="车辆类型">
                    <el-input v-model="vehicleForm.model" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="register_date" style="width: 22rem;height: 1.9rem;" label="注册日期">
                    <el-input v-model="vehicleForm.register_date" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="total_mass" style="width: 22rem;height: 1.9rem;" label="总质量">
                    <el-input v-model="vehicleForm.total_mass" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="use_character" style="width: 22rem;height: 1.9rem;" label="使用性质">
                    <el-input v-model="vehicleForm.use_character" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="vin" style="width: 22rem;height: 1.9rem;" label="车辆识别码">
                    <el-input v-model="vehicleForm.vin" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                  <el-form-item class="form-item form-item-dialog-id" prop="width" style="width: 22rem;height: 1.9rem;" label="外廓宽">
                    <el-input v-model="vehicleForm.width" maxlength="6" :disabled='vehicleIsDisabled'></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div style="margin-top: 1.25rem">
              <el-button class="btn" @click="close" type="primary">关闭</el-button>
              <el-button class="btn" @click="saveInfo('vehicleForm')" type="primary" :disabled='vehicleSaveBtnDisabled'>保存</el-button>
              <el-button class="btn" @click="modified" type="primary" :disabled='vehicleModifyBtnDisabled'>更改</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList, getListDetail, updateOrderDetail, updateIDDetail, updateVehicleDetail, sendNotice } from '@/api/orders'
  // import PicZoom from 'vue-piczoom'
  // import imgZoom from 'vue2.0-zoom'
  /*import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer/src/component.vue'*/
  import vImg from '@/components/v-img/index.vue'
  import { queryDict } from '@/api/queryDict'
  export default {
    components: {
      /*Viewer*/
      // imgZoom,
      vImg
    },
  //  inject: ['rightX','leftX'],
    data() {
      return {
        plainFlag: false,
        vehicleFrontPlainFlag: false,
        vehicleVicePplainFlag: true,
        carPlainFlag: true,
        orderSaveBtnDisabled: true,
        idSaveBtnDisabled: true,
        vehicleSaveBtnDisabled: true,
        orderModifyBtnDisabled:false,
        idModifyBtnDisabled:false,
        vehicleModifyBtnDisabled:false,
        idcard_front_style:null,
        idcard_vice_style:null,
        vehicle_front_style:null,
        vehicle_vice_style:null,
        car_style:null,
        idcard_front_deg:0,
        idcard_vice_deg:0,
        vehicle_front_deg:0,
        vehicle_vice_deg:0,
        car_deg:0,
        /*configs: {
          width: 400,
          height: 400,
          maskWidth: 100,
          maskHeight: 100,
          maskColor: 'red',
          maskOpacity: 0.2
        },*/
        options: {
          title: false
        },
        cardTypeList: [],
        orderStatusList: [],
        payStatusList: [],
        refundStatusList: [],
        idCardFlag: true,
        vehicleFrontFlag: true,
        vehicleViceFlag: false,
        carFlag: false,
        /*idcardFrontImgArr: [],
        idcardViceImgArr: [],
        vehicleFrontImgArr: [],
        vehicleViceImgArr: [],
        carImgArr: [],*/
        isShow: false,
        orderIsDisabled: true,
        idCardIsDisabled: true,
        vehicleIsDisabled: true,
        textarea: '',
        currentPage: 1,
        idCardInfo: {},
        imgInfo: {},
        vehicleCert: {},
        baseList: [],
        orderDetailTabs: 'orderTab',
        perPageNum: 10,
        totalListNum: 0,
        form: {
          order_id: '',
          ehall_order_id: '',
          plate_no: '',
          card_type: '',
          order_status: '',
          pay_status: '',
          refund_status: '',
          user_id: ''
        },
        orderForm: {
          order_status: '',
          audit_desc: '',
          address: '',
          express_cron: '',
          express_no: '',
          invoice_title: '',
          remark: ''
        },
        orderRules:{
          order_status: [
            { required: true, message: '请选择订单状态', trigger: 'change' }
          ],
          audit_desc:[
            {  max: 255, message: '长度不多于255个字符', trigger: 'blur' }
          ],
          address:[
            { required: true, message: '请输入收货地址', trigger: 'blur' },
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          express_cron:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          express_no:[
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          invoice_title:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          remark:[
            {  max: 128, message: '长度不多于128个字符', trigger: 'blur' }
          ]
        },
        idForm: {
          name: '',
          nation: '',
          cert_org: '',
          address: '',
          validity: ''
        },
        idRules:{
          name: [
            {  max: 64, message: '长度不多于64个字符', trigger: 'blur' }
          ],
          nation:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          cert_org:[
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          address:[
            {  max: 128, message: '长度不多于128个字符', trigger: 'blur' }
          ],
          express_no:[
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          invoice_title:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          validity:[
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ]
        },
        vehicleForm: {
          plate_no: '',
          owner: '',
          address: '',
          brand: '',
          engine_no: '',
          file_no: '',
          height: '',
          issue_date: '',
          length: '',
          load_mass: '',
          load_num: '',
          main_mass: '',
          model: '',
          register_date: '',
          total_mass: '',
          use_character: '',
          vin: '',
          width: ''
        },
        vehicleRules:{
          plate_no: [
            { required: true, message: '请输入车牌号', trigger: 'blur' },
            {  max: 8, message: '长度不多于8个字符', trigger: 'blur' }
          ],
          owner:[
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          address:[
            {  max: 64, message: '长度不多于64个字符', trigger: 'blur' }
          ],
          brand:[
            {  max: 32, message: '长度不多于32个字符', trigger: 'blur' }
          ],
          engine_no:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          file_no:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          height:[
            // { type: 'number',  message: '外廓高必须为数字值' },
            {  max: 4, message: '长度不多于4个字符', trigger: 'blur' }
          ],
          issue_date:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          length:[
            // { type: 'number',  message: '外廓长必须为数字值' },
            {  max: 4, message: '长度不多于4个字符', trigger: 'blur' }
          ],
          load_mass:[
            // { type: 'number',  message: '核载质量必须为数字值' },
            {  max: 8, message: '长度不多于8个字符', trigger: 'blur' }
          ],
          load_num:[
            // { type: 'number',  message: '核载人数必须为数字值' },
            {  max: 4, message: '长度不多于4个字符', trigger: 'blur' }
          ],
          main_mass:[
            // { type: 'number',  message: '整备质量必须为数字值' },
            {  max: 8, message: '长度不多于8个字符', trigger: 'blur' }
          ],
          model:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          register_date:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          total_mass:[
            // { type: 'number',  message: '总质量必须为数字值' },
            {  max: 8, message: '长度不多于8个字符', trigger: 'blur' }
          ],
          use_character:[
            {  max: 16, message: '长度不多于16个字符', trigger: 'blur' }
          ],
          vin:[
            {  max: 20, message: '长度不多于20个字符', trigger: 'blur' }
          ],
          width:[
            // { type: 'number',  message: '外廓宽必须为数字值' },
            {  max: 4, message: '长度不多于4个字符', trigger: 'blur' }
          ]
        },
        itemDetail: {}
      }
    },
    created() {
      this.queryCardType()
      this.queryOrderStatus()
      this.queryPayStatus()
      this.queryRefundStatus()
      this.fetchData()
    },
    methods: {
      formatCardType(row, column) {
        return row.card_type === null ? '无' : row.card_type === '1' ? '记账卡' : row.card_type === '2' ? '储值卡' : '未知'
      },
      formatOrderStatus(row, column) {
        return row.order_status === null ? '无' : row.order_status === '0' ? '订单提交中' : row.order_status === '1' ? '等待审核' : row.order_status === '2' ? '订单取消（用户取消）' : row.order_status === '3' ? '取消中' : row.order_status === '4' ? '订单取消' : row.order_status === '5' ? '审核通过' : row.order_status === '6' ? '审核不通过' : row.order_status === '7' ? '信息采集失败' : row.order_status === '8' ? '信息采集成功' : row.order_status === '9' ? '开卡失败' : row.order_status === '10' ? '开卡成功' : row.order_status === '11' ? '已发货' : row.order_status === '12' ? '已激活' : '未知'
      },
      formatRefundStatus(row, column) {
        return row.refund_status === null ? '未退款' : row.refund_status === '0' ? '未退款' : row.refund_status === '1' ? '退款失败' : row.refund_status === '2' ? '退款成功' : '未知'
      },
      formatPayStatus(row, column) {
        return row.pay_status === null ? '无' : row.pay_status === '0' ? '未支付' : row.pay_status === '1' ? '已支付' : '未知'
      },
      formatPlatId(row, column) {
        return row.plat_id === null ? '无' : row.plat_id === '12' ? '支付宝小程序' : row.plat_id === '13' ? '远联' : '未知'
      },
      queryCardType() {
        const params = {
          'group_id': 'CARD_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.cardTypeList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryOrderStatus() {
        const params = {
          'group_id': 'LTK_ORDER_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.orderStatusList = res.data ? res.data : []
          for (let i = 0; i < this.orderStatusList.length; i++) {
            if (this.orderStatusList[i].dict_id === '2') {
              this.orderStatusList[i].dict_value = this.orderStatusList[i].dict_value + '（用户取消）'
              this.orderStatusList[i].disabled = true
            } else if (this.orderStatusList[i].dict_id === '4') {
              this.orderStatusList[i].dict_value = this.orderStatusList[i].dict_value + '（后台取消）'
            }
          }
        }).catch(er => { })
      },
      queryPayStatus() {
        const params = {
          'group_id': 'PAY_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.payStatusList = res.data ? res.data : []
        }).catch(er => { })
      },
      queryRefundStatus() {
        const params = {
          'group_id': 'REFUND_STATUS',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.refundStatusList = res.data ? res.data : []
        }).catch(er => { })
      },
      showIdCardFront() {
        this.plainFlag = false
        this.idCardFlag = true
        this.idcard_front_deg = 0
        this.idcard_vice_deg = 0
      },
      showIdCardVice() {
        this.plainFlag = true
        this.idCardFlag = false
        this.idcard_front_deg = 0
        this.idcard_vice_deg = 0
      },
      showVehicleFront() {
        this.vehicleFrontPlainFlag = false
        this.vehicleVicePplainFlag = true
        this.carPlainFlag = true
        this.vehicleFrontFlag = true
        this.vehicleViceFlag = false
        this.carFlag = false
        this.vehicle_front_deg = 0
        this.vehicle_vice_deg = 0
        this.car_deg = 0
      },
      showVehicleVice() {
        this.vehicleFrontPlainFlag = true
        this.vehicleVicePplainFlag = false
        this.carPlainFlag = true
        this.vehicleFrontFlag = false
        this.vehicleViceFlag = true
        this.carFlag = false
        this.vehicle_front_deg = 0
        this.vehicle_vice_deg = 0
        this.car_deg = 0
      },
      showCar() {
        this.vehicleFrontPlainFlag = true
        this.vehicleVicePplainFlag = true
        this.carPlainFlag = false
        this.vehicleFrontFlag = false
        this.vehicleViceFlag = false
        this.carFlag = true
        this.vehicle_front_deg = 0
        this.vehicle_vice_deg = 0
        this.car_deg = 0
      },
      fetchData() {
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'card_type': this.form.card_type,
          'create_date_end': this.form.create_date === undefined ? '':this.form.create_date === null ? '':this.form.create_date[1] === '' ? '' : this.praseDate((this.form.create_date)[1]),
          'create_date_start': this.form.create_date === undefined ? '':this.form.create_date === null ? '':this.form.create_date[0] === '' ? '' : this.praseDate((this.form.create_date)[0]),
          'ehall_order_id': this.form.ehall_order_id,
          'order_id': this.form.order_id,
          'order_status': this.form.order_status,
          'pay_status': this.form.pay_status,
          'plate_no': this.form.plate_no,
          'refund_status': this.form.refund_status,
          'user_id': this.form.user_id
        }
        console.log(params.refund_status)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : []
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        this.fetchData()
      },
      modified() {
        if (this.orderDetailTabs === 'orderTab') {
          this.orderIsDisabled = false
          this.orderSaveBtnDisabled = false
          this.orderModifyBtnDisabled = true
        } else if (this.orderDetailTabs === 'idTab') {
          this.idCardIsDisabled = false
          this.idSaveBtnDisabled = false
          this.idModifyBtnDisabled = true
        } else {
          this.vehicleIsDisabled = false
          this.vehicleSaveBtnDisabled = false
          this.vehicleModifyBtnDisabled = true
        }
      },
      alterOrder() {
        const params = {
          'address': this.orderForm.address,
          'audit_desc': this.orderForm.audit_desc,
          'card_type': this.itemDetail.card_type,
          'ehall_order_id': this.itemDetail.ehall_order_id,
          'express_cron': this.orderForm.express_cron,
          'express_no': this.orderForm.express_no,
          'invoice_title': this.orderForm.invoice_title,
          'is_invoice': this.itemDetail.is_invoice,
          'order_id': this.itemDetail.order_id,
          'order_status': this.orderForm.order_status,
          'pay_status': this.itemDetail.pay_status,
          'plat_id': this.itemDetail.plat_id,
          'plate_no': this.itemDetail.plate_no,
          'refund_status': this.itemDetail.refund_status,
          'remark': this.orderForm.remark
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        updateOrderDetail(params).then(res => {
          const data = res.code
          if (data === '0000') {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.orderIsDisabled = true
            this.orderModifyBtnDisabled = false
            this.orderSaveBtnDisabled = true
            this.fetchData()
            const orderIdParams = {
              'order_id': this.itemDetail.order_id
            }
            this.getOrderDetail(orderIdParams)
          } else {
            this.$message.error('更新失败，请重试！')
          }
        }).catch(er => { })
        loading.close()
      },
      alterId() {
        const params = {
          'name': this.idForm.name,
          'nation': this.idForm.nation,
          'cert_no': this.idCardInfo.cert_no,
          'address': this.idForm.address,
          'validity': this.idForm.validity,
          'cert_id': this.itemDetail.cert_id,
          'cert_org': this.idForm.cert_org
        }
        console.log('params',params)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        updateIDDetail(params).then(res => {
          const data = res.code
          if (data === '0000') {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.search()
            this.idCardIsDisabled = true
            this.idModifyBtnDisabled = false
            this.idSaveBtnDisabled = true
          } else {
            this.$message.error('更新失败，请重试！')
          }
        }).catch(er => { })
        loading.close()
      },
      alterVehicle() {
        const params = {
          'address': this.vehicleForm.address,
          'brand': this.vehicleForm.brand,
          'car_id': this.itemDetail.car_id,
          'engine_no': this.vehicleForm.engine_no,
          'file_no': this.vehicleForm.file_no,
          'height': this.vehicleForm.height,
          'issue_date': this.vehicleForm.issue_date,
          'length': this.vehicleForm.length,
          'load_mass': this.vehicleForm.load_mass,
          'load_num': this.vehicleForm.load_num,
          'main_mass': this.vehicleForm.main_mass,
          'model': this.vehicleForm.model,
          'owner': this.vehicleForm.owner,
          'plate_no': this.vehicleForm.plate_no,
          'register_date': this.vehicleForm.register_date,
          'total_mass': this.vehicleForm.total_mass,
          'use_character': this.vehicleForm.use_character,
          'vin': this.vehicleForm.vin,
          'width': this.vehicleForm.width
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        updateVehicleDetail(params).then(res => {
          const data = res.code
          if (data === '0000') {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.vehicleIsDisabled = true
            this.vehicleModifyBtnDisabled = false
            this.vehicleSaveBtnDisabled = true
            this.search()
          } else {
            this.$message.error('更新失败，请重试！')
          }
        }).catch(er => { })
      },
      praseDate(date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return year + '-' + month + '-' + day
      },
      search() {
        this.currentPage = 1
        this.fetchData()
      },
      close() {
        if(this.orderIsDisabled === false || this.idCardIsDisabled === false || this.vehicleIsDisabled === false ){
          this.$confirm('您有未保存的改动, 是否继续关闭?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.isShow = !this.isShow
            this.imgInfo={}
            this.idCardInfo={}
            this.vehicleCert={}
            this.itemDetail={}
            this.orderIsDisabled = true
            this.idCardIsDisabled = true
            this.vehicleIsDisabled = true
            this.orderSaveBtnDisabled = true
            this.idSaveBtnDisabled = true
            this.vehicleSaveBtnDisabled = true
            this.orderModifyBtnDisabled = false
            this.idModifyBtnDisabled = false
            this.vehicleModifyBtnDisabled = false
          }).catch(() => {
          });
        } else{
          this.isShow = !this.isShow
          this.imgInfo={}
          this.idCardInfo={}
          this.vehicleCert={}
          this.itemDetail={}
          this.orderIsDisabled = true
          this.idCardIsDisabled = true
          this.vehicleIsDisabled = true
        }
      },
      saveInfo(formName) {
        var plateNo = this.itemDetail.plate_no
        var certNo = this.idCardInfo.cert_no
        var plateNoV = this.vehicleCert.plate_no
        if (this.orderDetailTabs === 'orderTab') {
          var result = false
          var xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
          var creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
          if(plateNo.length == 7){
            result = creg.test(plateNo);
          } else if(plateNo.length == 8){
            result = xreg.test(plateNo);
          }
          if(plateNo!=null&&plateNo!=''&&result === false){
            this.$message.error('请输入合法的车牌号！')
            return
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.alterOrder()
            } else {
              return false;
            }
          })
        } else if (this.orderDetailTabs === 'idTab') {
          var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          if(certNo!=null&&certNo!=''&&!reg.test(certNo))
          {
            this.$message.error("请输入合法的身份证号！")
            return
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.alterId()
            } else {
              return false;
            }
          })
        } else {
          var resultV = false
          var xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
          var creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
          if(plateNoV.length == 7){
            resultV = creg.test(plateNoV);
          } else if(plateNoV.length == 8){
            resultV = xreg.test(plateNoV);
          }
          if(plateNoV!=null&&plateNoV!=''&&resultV === false) {
            this.$message.error('请输入合法的车牌号！')
            return
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.alterVehicle()
            } else {
              return false;
            }
          })
        }
      },
      lookView(row) {
        this.isShow = !this.isShow
        this.orderDetailTabs = "orderTab"
        this.idCardFlag = true
        const params = {
          'order_id': row['order_id']
        }
        this.getOrderDetail(params)
      },
      getOrderDetail(params){
        getListDetail(params).then(res => {
          this.itemDetail = Object.assign({}, res.data)
          console.log(this.itemDetail)
          this.idCardInfo = this.itemDetail.idCardInfo

          this.imgInfo = this.itemDetail.imgInfo
          this.vehicleCert = this.itemDetail.vehicleCert
          this.orderForm.order_status = this.itemDetail.order_status
          this.orderForm.audit_desc = this.itemDetail.audit_desc
          this.orderForm.address = this.itemDetail.address
          this.orderForm.express_cron = this.itemDetail.express_cron
          this.orderForm.express_no = this.itemDetail.express_no
          this.orderForm.invoice_title = this.itemDetail.invoice_title
          this.orderForm.remark = this.itemDetail.remark
          this.idForm.name = this.idCardInfo.name
          this.idForm.nation = this.idCardInfo.nation
          this.idForm.cert_org = this.idCardInfo.cert_org
          this.idForm.address = this.idCardInfo.address
          this.idForm.validity = this.idCardInfo.validity
          this.vehicleForm.plate_no = this.vehicleCert.plate_no
          this.vehicleForm.owner = this.vehicleCert.owner
          this.vehicleForm.address = this.vehicleCert.address
          this.vehicleForm.brand = this.vehicleCert.brand
          this.vehicleForm.engine_no = this.vehicleCert.engine_no
          this.vehicleForm.file_no = this.vehicleCert.file_no
          this.vehicleForm.height = this.vehicleCert.height
          this.vehicleForm.issue_date = this.vehicleCert.issue_date
          this.vehicleForm.length = this.vehicleCert.length
          this.vehicleForm.load_mass = this.vehicleCert.load_mass
          this.vehicleForm.load_num = this.vehicleCert.load_num
          this.vehicleForm.main_mass = this.vehicleCert.main_mass
          this.vehicleForm.model = this.vehicleCert.model
          this.vehicleForm.register_date = this.vehicleCert.register_date
          this.vehicleForm.total_mass = this.vehicleCert.total_mass
          this.vehicleForm.use_character = this.vehicleCert.use_character
          this.vehicleForm.vin = this.vehicleCert.vin
          this.vehicleForm.width = this.vehicleCert.width
          // this.idcardFrontImgArr = []
          // this.idcardViceImgArr = []
          // this.vehicleFrontImgArr = []
          // this.vehicleViceImgArr = []
          // this.carImgArr = []
          // this.idcardFrontImgArr.push(this.imgInfo.idcard_front_img)
          // this.idcardViceImgArr.push(this.imgInfo.idcard_vice_img)
          // this.vehicleFrontImgArr.push(this.imgInfo.vehicle_front_img)
          // this.vehicleViceImgArr.push(this.imgInfo.vehicle_vice_img)
          // this.carImgArr.push(this.imgInfo.car_img)
          this.itemDetail.card_type_name = this.formatCardType(this.itemDetail)
          this.itemDetail.plat_id_name = this.formatPlatId(this.itemDetail)
          this.itemDetail.pay_status_name = this.formatPayStatus(this.itemDetail)
          this.itemDetail.refund_status_name = this.formatRefundStatus(this.itemDetail)
        }).catch(errInfo => { })
        // this.$nextTick(() => {
        //   this.forceUpdate()
        // })
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      /*sendNotice(row, flag) {
        var sign = ''
        if(flag === 1){
          sign = '订单'
        }else{
          sign = '支付'
        }
        this.$confirm('您确定发送'+ sign +'通知吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            'notice_type': flag,
            'order_id': row['order_id']
          }
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
          })
          sendNotice(params).then(res => {
            const data = res.code
            if (data === '0000') {
              this.$message({
                message: '发送成功',
                type: 'success'
              })
            } else {
              this.$message.error('发送失败，请重试！')
            }
          }).catch(er => { })
          loading.close()
        }).catch(() => {
        })
      },*/
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      rotateRight(){
//        this.rightX
        //this.$refs.child.rotateRight()
        //return
        if (this.orderDetailTabs === 'idTab') {
          if(this.idCardFlag){
            //this.idcard_front_deg += 90
       //     console.log(document.getElementById('_magnifier_layer'))
            this.$refs.child1.rotateRight()
            //document.getElementById('idcard_front').style.transform = "rotate("+this.idcard_front_deg+"deg)"
            // document.getElementById('_magnifier_layer').style.transform = "rotate("+this.idcard_front_deg+"deg)"
          } else {
            //this.idcard_vice_deg += 90
            this.$refs.child2.rotateRight()
            //document.getElementById('idcard_vice').style.transform = "rotate("+this.idcard_vice_deg+"deg)"
            // document.getElementById('_magnifier_layer').style.transform = "rotate("+this.idcard_vice_deg+"deg)"
          }
        } else {
          if(this.vehicleFrontFlag === true){
            this.$refs.child3.rotateRight()
            // this.vehicle_front_deg += 90
            // document.getElementById('vehicle_front').style.transform = "rotate("+this.vehicle_front_deg+"deg)"
          } else if(this.vehicleViceFlag === true){
            // this.vehicle_vice_deg += 90
            // document.getElementById('vehicle_vice').style.transform = "rotate("+this.vehicle_vice_deg+"deg)"
            this.$refs.child4.rotateRight()
          }else{
            // this.car_deg += 90
            // document.getElementById('car_img').style.transform = "rotate("+this.car_deg+"deg)"
            this.$refs.child5.rotateRight()
          }
        }
      },
      rotateLeft(){
        /*this.$refs.child.rotateLeft()
        return*/
        if (this.orderDetailTabs === 'idTab') {
          if(this.idCardFlag === true){
            this.$refs.child1.rotateLeft()
      //       this.idcard_front_deg -= 90
      //       document.getElementById('idcard_front').style.transform = "rotate("+this.idcard_front_deg+"deg)"
            //this.idcard_front_style="transform :rotate("+this.idcard_front_deg+"deg)"
          } else {
            this.$refs.child2.rotateLeft()
            // this.idcard_vice_deg -= 90
            // document.getElementById('idcard_vice').style.transform = "rotate("+this.idcard_vice_deg+"deg)"
            //this.idcard_vice_style="transform :rotate("+this.idcard_vice_deg+"deg)"
          }
        } else {
          if(this.vehicleFrontFlag === true){
            this.$refs.child3.rotateLeft()
            // this.vehicle_front_deg -= 90
            // document.getElementById('vehicle_front').style.transform = "rotate("+this.vehicle_front_deg+"deg)"
            //this.vehicle_front_style="transform :rotate("+this.vehicle_front_deg+"deg)"
          } else if(this.vehicleViceFlag === true){
            this.$refs.child4.rotateLeft()
            // this.vehicle_vice_deg -= 90
            // document.getElementById('vehicle_vice').style.transform = "rotate("+this.vehicle_vice_deg+"deg)"
            //this.vehicle_vice_style="transform :rotate("+this.vehicle_vice_deg+"deg)"
          }else{
            this.$refs.child5.rotateLeft()
            // this.car_deg -= 90
            // document.getElementById('car_img').style.transform = "rotate("+this.car_deg+"deg)"
            //this.car_style="transform :rotate("+this.car_deg+"deg)"
          }
        }
      },
      isVehicleNumber(value) {
        var result = false;
        var xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
        var creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        if(value.length == 7){
          result = creg.test(value);
        } else if(value.length == 8){
          result = xreg.test(value);
        }
        if(value!=null&&value!=''&&result === false){
          this.$message.error('车牌号输入不合法！')
        }
      },
      isCardNo(value){
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(value!=null&&value!=''&&reg.test(value) === false)
        {
          this.$message.error("身份证输入不合法！")
        }
      },
      /**
       * 计算字符串长度 截取并返回指定长度的字符串
       * @param obj	元素对象
       * @param len	截取字节长度 中文2字节 英文1字节
       */
      maxLengthDispose(obj, len){
        // 获取元素值
        var content = obj.target.value
        if (content == null||content == '') {
          return;
        }
        alert(content.toString().replace(/[^\x00-\xff]/g,"aa").length)
        // 计算元素值长度 中文2 英文1
        // 先将中文替换为英文在计算长度
        var realLen = content.toString().replace(/[^\x00-\xff]/g,"aa").length;
        // 当实际长度超出指定长度时
        if (realLen > len) {
          // 截取字符串
          this.$message.error('最长可输入'+len+'字节的字符！')
          obj.target.value=this.subString1(content, len)
          // 返回
        }
      },

      /**
      * 截取字符串 中英文混合
      * @param str	待处理字符串
      * @param len	截取字节长度 中文2字节 英文1字节
      */
      subString1(str, len){
        var regexp = /[^\x00-\xff]/g;// 正在表达式匹配中文
        // 当字符串字节长度小于指定的字节长度时
        if (str.replace(regexp, "aa").length <= len) {
          return str;
        }
        // 假设指定长度内都是中文
        var m = Math.floor(len/2);
        for (var i = m, j = str.length; i < j; i++) {
          // 当截取字符串字节长度满足指定的字节长度
          if (str.substring(0, i).replace(regexp, "aa").length >= len) {
            return str.substring(0, i);
          }
        }
        return str;
      }
    }
  }
</script>

<style  lang="scss" scoped>
  .flex-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
  }
  .form-item-dialog{
    margin-top: 0.6rem;
  }
  .form-item-dialog-id{
    margin-top: 0.8rem;
  }
  .flex-row1 {
    width: 12.5rem;
    height: 3.1rem;
    display: flex;
    justify-content: center;
  }
  .flex-column {
    margin-top: 1.9rem;
    margin-right: 1.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .buttons{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .context {
    flex: 0;
  }
  .form-item{
    font-size: 0.75rem;
  }
  .page-num {
    float: right;
  }
  .content {
    height: 24rem;
  }
  .pw22 {
    width: 22%;
  }
  .btn {
    float: right;
    margin: 0 0.9rem;
  }
  .ml20 {
    margin-left: 1.2rem;
  }
  .bfc {
    overflow: hidden;
  }
  .flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .h100 {
    height: 3.2rem;
  }
  .w100 {
    display: block;
    width: 6.2rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .aic {
    align-items: center;
  }
  .jcsa {
    justify-content: flex-start;
  }
  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    &-box {
      width: 55%;
      height: 32rem;
      background-color: #fff;
      padding: 0.5rem 1rem;
    }
  }
</style>
